<template>
  <div class="sidebar">
    <el-card class="sidebar-card">
      <div class="sidebar-section login-section">
        <div class="login-container" v-if="!userStore.state.token">
          <el-button type="primary" size="large" class="login-btn" @click="goLogin">登录</el-button>
        </div>
        <div v-if="userStore.state.token">
          <el-button type="primary" size="large" @click="goLogout" class="logout-btn">登出</el-button>
        </div>
        <div >
          <el-button type="success" @click="goWrite" size="large" style="min-width: 100px;" class="write-btn">写文章</el-button>
        </div>
      </div>
      <div class="sidebar-section">
        <strong>热门文章</strong>
        <ul class="hot-list ul-class">
          <!-- 修改热门文章列表项，实现标题省略和浏览量右对齐 -->
          <li v-for="item in hotArticles" :key="item.id" @click="toArticleDetail(item.id)" class="hot-article-item">
            <span class="article-title">{{ item.title }}</span>
            <span class="article-views"><el-icon><View /></el-icon>️ {{ item.views }}</span>
          </li>
        </ul>
      </div>
      <!-- 删除分类目录，添加3D标签云 -->
      <div class="sidebar-section">
        <strong>3D标签云</strong>
        <TagCloud3D 
          :tags="tagCloud"
          :radius="120"
          :auto-rotate="true"
          :rotate-speed="0.3"
          @tag-click="handleTagClick"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from "../stores/user.js";
import blogApi from '../api/blog.js';
import { ref, onMounted } from 'vue';
import TagCloud3D from './TagCloud3D.vue'; // 引入3D标签云组件

const router = useRouter();
const userStore = useUserStore();

function goWrite() {
  router.push('/write');
}
const hotArticles = ref([]);
// 使用写死的假数据作为标签云数据
const tagCloud = ref([
  {id: 1, name: "算法", count: 15},
  {id: 2, name: "Go语言", count: 8},
  {id: 3, name: "前端开发", count: 12},
  {id: 4, name: "数据库", count: 6},
  {id: 5, name: "云计算", count: 9},
  {id: 6, name: "微服务", count: 11},
  {id: 7, name: "容器", count: 7},
  {id: 8, name: "人工智能", count: 14},
  {id: 9, name: "Java", count: 10},
  {id: 10, name: "Python", count: 13},
  {id: 11, name: "React", count: 8},
  {id: 12, name: "Vue", count: 9}
]);

// 获取热门文章
const GetHotArticleList = async () => {
  const res = await blogApi.GetHotArticleList();
  if (res.code === 0) {
    hotArticles.value = res.data;
  }
}

// 根据文章数量决定标签大小
const getTagSize = (count) => {
  if (count > 10) return 'medium';
  if (count > 5) return 'default';
  return 'small';
}

// 根据文章数量决定标签类型
const getTagType = (count) => {
  if (count > 10) return 'primary';
  if (count > 5) return 'success';
  return 'info';
}

// 添加导航到文章详情页的方法
const toArticleDetail = (id) => {
  router.push({
    path: `/article/${id}`,
  });
}

// 添加导航到标签筛选文章的方法
const toArticlesByTag = (tagName) => {
  // 这里假设你有一个可以根据标签筛选文章的页面
  // 如果没有，可以跳转到首页并带上标签参数
  router.push({
    path: '/',
    query: { tag: tagName }
  });
}

function goLogin() {
  router.push('/login')
}

function goLogout() {
  userStore.logout()
}

onMounted(() => {
  GetHotArticleList();
})

// 处理标签点击事件
const handleTagClick = (tag) => {
  toArticlesByTag(tag.name);
};
</script>

<style scoped>

.sidebar {
  width: 100%;
}
.sidebar-card {
  margin-bottom: 16px;
}
.sidebar-section {
  margin-bottom: 24px;
}

.logout-btn {
  width: 120px;
  height: 40px;
  font-size: 16px;
  margin: 10px;
}
.write-btn {
  width: 120px;
  height: 40px;
  font-size: 16px;
}
.login-section {
  text-align: center;
  padding: 8px 0;
}
.login-container {
  display: flex;
  justify-content: center;
}
.login-btn {
  width: 120px;
  height: 40px;
  font-size: 16px;
  margin: 10px;
}
.hot-list {
  padding-left: 16px;
  margin: 8px 0 0 0;
}
.hot-article-item {
  color: var(--text-primary-color);
  cursor: pointer;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 8px;
  line-height: 1.5;
}
.hot-article-item:hover {
  color: var(--text-hover-color);
}
/* 文章标题样式 */
.article-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.hot-article-item:hover .article-title {
  text-decoration: underline;
}
/* 文章浏览量样式 - 包含图标和数字的行内水平对齐 */
.article-views {
  color: var(--text-secondary-color);
  font-size: 12px;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
/* Element Plus 图标的垂直对齐 */
.article-views .el-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-size: 12px;
}

/* 标签云样式 */
.tag-cloud {
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-item {
  cursor: pointer;
  transition: all 0.3s;
}
.tag-item:hover {
  transform: scale(1.05);
}

/* 调整3D标签云容器的样式 */
.sidebar-section:has(.tag-cloud-3d-container) {
  margin-bottom: 24px;
}
</style>